<div class="form-field" ng-switch="formElement.type" ng-class="{'editing': editState.field == formElement}">

    <div class="actions" ng-show="(!formMode || formMode != 'read')">
        <button class="btn btn-clean" ng-click="openFieldPopover()"><i class="glyphicon glyphicon-pencil"></i></button>
        <button class="btn btn-clean" ng-click="removeFormElement(formElement)"><i class="icon icon-remove"></i>
        </button>
    </div>

    <div ng-switch-when="text" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}}</label><span class="marker"
                                                                                        ng-if="formElement.required">*</span>
        <input type="text" class="form-control" style="cursor:default;background-color:#fff;" value="Text" disabled>
    </div>

    <div ng-switch-when="password" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}}</label><span class="marker"
                                                                                        ng-if="formElement.required">*</span>
        <input type="text" class="form-control" style="cursor:default;background-color:#fff;" value="Password" disabled>
    </div>

    <div ng-switch-when="multi-line-text" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}}</label><span class="marker"
                                                                                        ng-if="formElement.required">*</span>
        <textarea rows="4" class="form-control" style="cursor:default;background-color:#fff;" value="Text"
                  disabled></textarea>
    </div>

    <div ng-switch-when="date" class="form-group">
        <label class="control-label form-field-label"><i class="glyphicon glyphicon-calendar"></i> {{formElement.name}}
            <span class="marker" ng-if="formElement.required">*</span></label>
        <input type="text" class="form-control" name="date" disabled>
    </div>

    <div ng-switch-when="boolean" class="checkbox" style="padding-left:0;">
        <label class="control-label form-field-label"></label>
        <div style="padding-left: 20px;">
            <input type="checkbox" class="checkbox-inline" disabled>{{formElement.name}} <span class="marker"
                                                                                               ng-if="formElement.required">*</span>
        </div>
    </div>

    <div ng-switch-when="radio-buttons" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                                 ng-if="formElement.required">*</span></label>
        <div ng-show="formElement.options && formElement.options.length > 0" class="radio"
             ng-repeat="option in formElement.options">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios{{$index}}" value="option{{$index}}"
                       ng-checked="formElement.value == option.name" disabled>{{option.name}}</input>
            </label>
        </div>
        <div ng-show="!formElement.options && formElement.options.length === 0 && !formElement.optionsExpression"
             class="radio">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" disabled>
                Option 1
            </label>
        </div>
        <div ng-show="formElement.optionsExpression" ng-style="{'font-size': '1em'}">
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="none" disabled>
                {{formElement.optionsExpression}}
                </input>
            </label>
        </div>
        <div class="clearfix"></div>
    </div>

    <div ng-switch-when="integer" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                                 ng-if="formElement.required">*</span></label>
        <input type="number" class="form-control" style="cursor:default;background-color:#fff;" value="123" disabled>
    </div>

    <div ng-switch-when="decimal" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                                 ng-if="formElement.required">*</span></label>
        <input type="number" class="form-control" style="cursor:default;background-color:#fff;" value="123.12" disabled>
    </div>

    <div ng-switch-when="dropdown" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                                 ng-if="formElement.required">*</span></label>
        <select class="form-control" style="cursor:default;" disabled>
            <option>Select...</option>
        </select>
    </div>

    <div ng-switch-when="people" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                                 ng-if="formElement.required">*</span></label>
        <div class="input-group">
            <span class="input-group-addon"><i class="icon icon-user-add"></i></span>
            <input type="text" class="form-control" style="cursor:default;background-color:#fff;"
                   placeholder="{{'FORM-BUILDER.LABEL.PERSON' | translate}}" value="{{formElement.placeholder}}"
                   disabled>
        </div>
    </div>

    <div ng-switch-when="functional-group" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                                 ng-if="formElement.required">*</span></label>
        <div class="input-group">
            <span class="input-group-addon"></span>
            <input type="text" class="form-control" style="cursor:default;background-color:#fff;"
                   placeholder="{{'FORM-BUILDER.LABEL.FUNCTIONAL-GROUP' | translate}}"
                   value="{{formElement.placeholder}}">
        </div>
    </div>

    <div ng-switch-when="upload" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}} <span class="marker"
                                                                                 ng-if="formElement.required">*</span></label>
        <div class="input-group clearfix">
            <span class="input-group-addon"><i class="icon icon-folder"></i></span>
            <input type="text" class="form-control" style="cursor:default;background-color:#fff;"
                   value="Upload or import content..." disabled>
        </div>
    </div>

    <div ng-switch-when="hyperlink" class="form-group">
        <label class="control-label form-field-label">{{formElement.name}}<span class="marker"
                                                                                ng-if="formElement.required">*</span></label>
        <div class="message" ng-show="formElement.params.hyperlinkUrl">{{formElement.params.hyperlinkUrl}}</div>
    </div>

    <div ng-switch-when="spacer" class="form-group">
        <br/>
    </div>

    <div ng-switch-when="horizontal-line" class="form-group">
        <hr>
    </div>

    <div ng-switch-when="headline" class="form-group">
        <h4><strong>{{formElement.name}}</strong></h4>
    </div>

    <div ng-switch-when="headline-with-line" class="form-group">
        <h4><strong>{{formElement.name}}</strong></h4>
        <hr>
    </div>

    <div ng-switch-when="expression" class="form-group">
        <div class="message" ng-style="{'font-size': formElement.params.size + 'em'}">
            <div ng-show="formElement.expression && formElement.expression.length > 0">
                {{formElement.expression}}
            </div>
            <div ng-show="!formElement.expression || formElement.expression.length == 0">
                {{'FORM-BUILDER.MESSAGE.EMPTY-EXPRESSION' | translate}}
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
